import {
    ExpandOutlined,
    FullscreenExitOutlined,
    FullscreenOutlined,
    MoonOutlined,
    QuestionCircleOutlined,
    SearchOutlined,
    SunOutlined,
} from '@ant-design/icons';
import { SelectLang as UmiSelectLang, useModel } from '@umijs/max';
import React, { useState } from 'react';
import styles from './index.less';

export const SelectLang = () => {
    return <UmiSelectLang className={styles.iconSize} />;
};

export const Question = () => {
    return (
        <div
            style={{}}
            onClick={() => {
                window.open('https://pro.ant.design/docs/getting-started');
            }}
        >
            <QuestionCircleOutlined className={styles.iconSize} />
        </div>
    );
};

export const FullScreen = () => {
    const [fullscreen, setFullscreen] = useState(false);

    const toggleFulllScreen = () => {
        const element = document.documentElement;
        setFullscreen(!fullscreen);
        if (!document.fullscreenElement) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                // Firefox
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) {
                // Chrome, Safari and Opera
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) {
                // IE/Edge
                element.msRequestFullscreen();
            }
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                // Firefox
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                // Chrome, Safari and Opera
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                // IE/Edge
                document.msExitFullscreen();
            }
        }
    };

    return (
        <div onClick={toggleFulllScreen}>
            {fullscreen ? (
                <FullscreenExitOutlined className={styles.iconSize} />
            ) : (
                <ExpandOutlined className={styles.iconSize} style={{fontSize: 16}} />
            )}
        </div>
    );
};

export const Search = () => {
    return <SearchOutlined className={styles.iconSize} />;
};

export const Theme = () => {
    const [darkMode, setDarkMode] = useState(false);
    const { setInitialState } = useModel('@@initialState');
    const toggleTheme = (event: any, dark: boolean) => {
        setDarkMode(dark);
        setInitialState((s: any) => ({
            ...s,
            settings: {
                ...s?.settings,
                navTheme: dark ? 'realDark' : 'light',
            },
        }));
        // 切换主题
        // 检查浏览器是否支持 View Transition API
        if (!document.startViewTransition) {
            // 不支持则直接切换主题，不添加动画
            document.documentElement.classList.toggle('realDark');
            return;
        }
        const transition = document.startViewTransition(() => {
            document.documentElement.classList.toggle('realDark');
        });

        transition.ready.then(() => {
            const { clientX, clientY } = event;

            const endRadius = Math.hypot(
                Math.max(clientX, innerWidth - clientX),
                Math.max(clientY, innerHeight - clientY),
            );

            const clipPath = [
                `circle(0px at ${clientX}px ${clientY}px)`,
                `circle(${endRadius}px at ${clientX}px ${clientY}px)`,
            ];

            const isDark = dark;

            document.documentElement.animate(
                {
                    clipPath: isDark ? clipPath.reverse() : clipPath,
                },
                {
                    duration: 450,
                    easing: 'ease-in',
                    pseudoElement: isDark
                        ? '::view-transition-old(root)'
                        : '::view-transition-new(root)',
                },
            );
        });
    };

    return (
        <div onClick={(event) => toggleTheme(event, !darkMode)}>
            {darkMode ? (
                <SunOutlined className={styles.iconSize} />
            ) : (
                <MoonOutlined className={styles.iconSize} />
            )}
        </div>
    );
};
